﻿<div class="card card-block" v-if="visible">
    <form v-validation="validation" >
        <div class="form-group row">
            <label for="firstName" class="col-sm-2 col-form-label">ID</label>
            <div class="col-sm-10">
                {{person.id}}
            </div>
        </div>
        <div class="form-group row ">
            <label for="firstName" class="col-sm-2 col-form-label">FirstName</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-required="validation" id="firstName" v-model="person.firstName">
            </div>
        </div>
        <div class="form-group row">
            <label for="lastName" class="col-sm-2 col-form-label">LastName</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-required="validation" id="lastName" v-model="person.lastName">
            </div>
        </div>
        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="button" class="btn btn-primary" v-on:click="save">Save</button>
                <button type="button" class="btn btn-primary" v-on:click="cancel">Cancel</button>
            </div>
        </div>
    </form>
</div>